<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ box-sizing: border-box;}
body{ margin:0; padding:0;}
.div-input{ margin:0; padding:0; margin:100px;}
.div-input input{ width:300px; height:40px; line-height:40px; border:1px solid #ddd;}
.div-input a{ display:inline-block; width:300px; height:40px; line-height:40px; border:1px solid #ddd;}

</style>


<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-datePicker.css"/>
<script type="text/javascript" src="jquery-datePicker.js"></script>
</head>

<body>

<div class="div-input">
	<p>不显示 时分秒</p>
	<input type="text" id='datatime1' readonly="readonly" />
</div>

<div class="div-input">
	<p>显示 时分秒</p>
	<input type="text" id='datatime2' readonly="readonly" value="2016-06-20 11:45:43 ~ 2016-05-21 11:45:43" />
</div>

<div class="div-input">
	<p>限制最小最大日期</p>
	<input type="text" id='datatime3' readonly="readonly" />
</div>

<div class="div-input">
	<p>单选日期 </p>
	<input type="text" id='datatime4' readonly="readonly" />
</div>

<div class="div-input">
	<p>自定义输出 </p>
	<input type="text" id='datatime5_1' value="2016-05-20" readonly="readonly" />
    <input type="text" id='datatime5_2' value="2016-08-30" readonly="readonly" />
</div>
<div class="div-input">
	<p>标签 选择 </p>
	<a id="datatime6" href="javascript:;"></a>
</div>

</body>

<script type="text/javascript">

$("#datatime1").datePicker({
	format:"YYYY-MM-DD", //格式化
	separator:" ~ "   //分隔标示
});



$("#datatime2").datePicker({
	format:"YYYY-MM-DD HH:mm:ss", //格式化
	separator:" ~ "   //分隔标示
});



$("#datatime3").datePicker({
	format:"YYYY-MM-DD", //格式化
	separator:" ~ ",   //分隔标示
	minDate:new Date()
});


$("#datatime4").datePicker({
	format:"YYYY-MM-DD", //格式化
	separator:" ~ ",   //分隔标示
	singleDate:true,  //单选日期
});

$("#datatime5_1,#datatime5_2").datePicker({
	format:"YYYY-MM-DD", //格式化
	separator:" ~ ",   //分隔标示
	setValue:function(s1,s2){  //自定义输出
		$("#datatime5_1").val(s1);
		$("#datatime5_2").val(s2);
	}
});

$("#datatime6").datePicker({
	format:"YYYY-MM-DD", //格式化
	separator:" ~ "   //分隔标示
});

</script>

</html>
